<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>covid-19 website</title>

    <!-- font awesome cdn link  -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

    <!-- custom css file link  -->
    <link rel="stylesheet" href="../assets/css/covid-19.css">

</head>

<body>

    <!-- header section starts  -->

    <header>

        <a href="#" class="logo">c<span class="fas fa-virus"></span>vid-19</a>

        <div id="menu" class="fas fa-bars"></div>

        <nav class="navbar">
            <a class="active" href="#home">home</a>
            <a href="#prevent">prevent</a>
            <a href="#symptoms">symptoms</a>
            <a href="#precautions">precautions</a>
            <a href="#doctor">doctor</a>
            <a href="#hand-wash">hand-wash</a>
        </nav>

    </header>

    <!-- header section ends -->

    <!-- home section starts  -->

    <section class="home" id="home">

        <div class="content">
            <h1>Prevention from Corona Virus</h1>
            <h3>stay home, stay safe</h3>
            <a href="#" class="btn">how to prevent</a>
        </div>

    </section>

    <!-- home section ends -->

    <!-- prevent section starts  -->

    <section class="prevent" id="prevent">

        <h1 class="heading"> how to prevent virus </h1>

        <div class="box-container">

            <div class="box">
                <img src="../assets/Images/covid-19/pre-1.png" alt="">
                <h3>wash your place</h3>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus, repudiandae aspernatur eum
                    minus accusamus eligendi delectus ad? Similique, facilis esse?</p>
            </div>

            <div class="box">
                <img src="../assets/Images/covid-19/pre-2.png" alt="">
                <h3>maintain distance</h3>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus, repudiandae aspernatur eum
                    minus accusamus eligendi delectus ad? Similique, facilis esse?</p>
            </div>

            <div class="box">
                <img src="../assets/Images/covid-19/pre-3.png" alt="">
                <h3>don't touch face</h3>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus, repudiandae aspernatur eum
                    minus accusamus eligendi delectus ad? Similique, facilis esse?</p>
            </div>

            <div class="box">
                <img src="../assets/Images/covid-19/pre-4.png" alt="">
                <h3>wash your hand</h3>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus, repudiandae aspernatur eum
                    minus accusamus eligendi delectus ad? Similique, facilis esse?</p>
            </div>

            <div class="box">
                <img src="../assets/Images/covid-19/pre-5.png" alt="">
                <h3>use napkin</h3>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus, repudiandae aspernatur eum
                    minus accusamus eligendi delectus ad? Similique, facilis esse?</p>
            </div>

            <div class="box">
                <img src="../assets/Images/covid-19/pre-6.png" alt="">
                <h3>wear a mask</h3>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Voluptatibus, repudiandae aspernatur eum
                    minus accusamus eligendi delectus ad? Similique, facilis esse?</p>
            </div>

        </div>

    </section>

    <!-- prevent section ends -->

    <!-- symptoms section starts  -->

    <section class="symptoms" id="symptoms">

        <h1 class="heading">covid-19 symptoms</h1>

        <div class="column">

            <div class="main-image">
                <img src="../assets/Images/covid-19/main-symp-img.png" alt="">
            </div>

            <div class="box-container">

                <div class="box">
                    <img src="../assets/Images/covid-19/symp-a.png" alt="">
                    <h3>dry cough</h3>
                </div>

                <div class="box">
                    <img src="../assets/Images/covid-19/symp-b.png" alt="">
                    <h3>sore throat</h3>
                </div>

                <div class="box">
                    <img src="../assets/Images/covid-19/symp-c.png" alt="">
                    <h3>cold</h3>
                </div>

                <div class="box">
                    <img src="../assets/Images/covid-19/symp-d.png" alt="">
                    <h3>fever</h3>
                </div>

                <div class="box">
                    <img src="../assets/Images/covid-19/symp-e.png" alt="">
                    <h3>headache</h3>
                </div>

                <div class="box">
                    <img src="../assets/Images/covid-19/symp-f.png" alt="">
                    <h3>vomiting</h3>
                </div>

            </div>

        </div>

    </section>

    <!-- symptoms section ends -->

    <!-- precautions section starts  -->

    <section class="precautions" id="precautions">

        <h1 class="heading">take precautions against covid-19</h1>

        <div class="column">

            <div class="box-container">

                <h3 class="title">things you should DO</h3>

                <div class="box">
                    <img src="../assets/Images/covid-19/do-img1.png" alt="">
                    <div class="info">
                        <h3>wash your hand</h3>
                        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel odit quo saepe illum tempora
                            corrupti sint distinctio, perferendis maxime illo!</p>
                    </div>
                </div>

                <div class="box">
                    <img src="../assets/Images/covid-19/do-img2.png" alt="">
                    <div class="info">
                        <h3>always wear a mask</h3>
                        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel odit quo saepe illum tempora
                            corrupti sint distinctio, perferendis maxime illo!</p>
                    </div>
                </div>

                <div class="box">
                    <img src="../assets/Images/covid-19/do-img3.png" alt="">
                    <div class="info">
                        <h3>stay home during fever</h3>
                        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel odit quo saepe illum tempora
                            corrupti sint distinctio, perferendis maxime illo!</p>
                    </div>
                </div>

            </div>

            <div class="box-container">

                <h3 class="title">things you should NOT DO</h3>

                <div class="box">
                    <img src="../assets/Images/covid-19/dont-img1.png" alt="">
                    <div class="info">
                        <h3>avoid close contact with animals</h3>
                        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel odit quo saepe illum tempora
                            corrupti sint distinctio, perferendis maxime illo!</p>
                    </div>
                </div>

                <div class="box">
                    <img src="../assets/Images/covid-19/dont-img2.png" alt="">
                    <div class="info">
                        <h3>avoid close contact with peoples</h3>
                        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel odit quo saepe illum tempora
                            corrupti sint distinctio, perferendis maxime illo!</p>
                    </div>
                </div>

                <div class="box">
                    <img src="../assets/Images/covid-19/dont-img3.png" alt="">
                    <div class="info">
                        <h3>avoid crowded area</h3>
                        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel odit quo saepe illum tempora
                            corrupti sint distinctio, perferendis maxime illo!</p>
                    </div>
                </div>

            </div>

        </div>

    </section>

    <!-- precautions section ends -->

    <!-- doctor section start  -->

    <section class="doctor" id="doctor">

        <h1 class="heading">consult to our doctors</h1>

        <div class="box-container">

            <div class="box">
                <img src="../assets/Images/covid-19/doc1.png" alt="">
                <h3>john doe</h3>
                <span>senior expert</span>
                <div class="share">
                    <a href="#" class="fab fa-whatsapp"></a>
                    <a href="#" class="fab fa-facebook-f"></a>
                    <a href="#" class="fab fa-twitter"></a>
                    <a href="#" class="fab fa-instagram"></a>
                    <a href="#" class="fab fa-linkedin"></a>
                </div>
            </div>

            <div class="box">
                <img src="../assets/Images/covid-19/doc2.png" alt="">
                <h3>john doe</h3>
                <span>senior expert</span>
                <div class="share">
                    <a href="#" class="fab fa-whatsapp"></a>
                    <a href="#" class="fab fa-facebook-f"></a>
                    <a href="#" class="fab fa-twitter"></a>
                    <a href="#" class="fab fa-instagram"></a>
                    <a href="#" class="fab fa-linkedin"></a>
                </div>
            </div>

            <div class="box">
                <img src="../assets/Images/covid-19/doc3.png" alt="">
                <h3>john doe</h3>
                <span>senior expert</span>
                <div class="share">
                    <a href="#" class="fab fa-whatsapp"></a>
                    <a href="#" class="fab fa-facebook-f"></a>
                    <a href="#" class="fab fa-twitter"></a>
                    <a href="#" class="fab fa-instagram"></a>
                    <a href="#" class="fab fa-linkedin"></a>
                </div>
            </div>

        </div>

    </section>

    <!-- doctor section ends -->

    <!-- hand-wash section starts  -->

    <section class="hand-wash" id="hand-wash">

        <h1 class="heading">how to wash hand properly</h1>

        <div class="column">

            <div class="box-container">

                <div class="box">
                    <img src="../assets/Images/covid-19/wash-a.png" alt="">
                    <h3>water and soap</h3>
                </div>

                <div class="box">
                    <img src="../assets/Images/covid-19/wash-b.png" alt="">
                    <h3>palm to palm</h3>
                </div>

                <div class="box">
                    <img src="../assets/Images/covid-19/wash-c.png" alt="">
                    <h3>Between Fingurs</h3>
                </div>

                <div class="box">
                    <img src="../assets/Images/covid-19/wash-d.png" alt="">
                    <h3>Focus on Thumbs</h3>
                </div>

                <div class="box">
                    <img src="../assets/Images/covid-19/wash-e.png" alt="">
                    <h3>Back of Hands</h3>
                </div>

                <div class="box">
                    <img src="../assets/Images/covid-19/wash-f.png" alt="">
                    <h3>Focus on wrist</h3>
                </div>

            </div>

            <div class="main-image">
                <img src="../assets/Images/covid-19/main-wash-img.png" alt="">
            </div>

        </div>

    </section>

    <!-- hand-wash section ends -->

    <!-- footer section starts  -->

    <div class="footer">

        <div class="box-container">

            <div class="box">
                <h3>about us</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate minima soluta distinctio eaque
                    magni veritatis dicta dolore dignissimos totam quis!</p>
            </div>

            <div class="box">
                <h3>locations</h3>
                <a href="#">india</a>
                <a href="#">USA</a>
                <a href="#">france</a>
                <a href="#">russia</a>
                <a href="#">japan</a>
            </div>

            <div class="box">
                <h3>quick links</h3>
                <a href="#">home</a>
                <a href="#">prevent</a>
                <a href="#">symptoms</a>
                <a href="#">precautions</a>
                <a href="#">doctor</a>
                <a href="#">hand-wash</a>
            </div>

            <div class="box">
                <h3>follow us</h3>
                <a href="#">facebook</a>
                <a href="#">twitter</a>
                <a href="#">instagram</a>
                <a href="#">linkedin</a>
                <a href="#">youtube</a>
            </div>

        </div>

        <h1 class="credit"> created by <a href="#">Mrinal Anand</a> &copy; copyright @ 2021 </h1>

    </div>

    <!-- footer section ends -->

    <!-- scroll top  -->

    <a href="#home" class="scroll-top">
        <img src="../assets/Images/covid-19/scroll-img.png" alt="">
    </a>
















    <!-- jquery cdn link  -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

    <!-- custom js file link  -->
    <script src="../assets/js/covid-19.js"></script>


</body>

</html>